<template>
  <div class="wap-container myOrders" id="container">
    <div class="br"></div>
    <tab active-color="#43A2FE" v-model="currentIndex" class="nav">
      <tab-item v-for="(item, index) in list" :key="index" :selected="index===currentIndex">
        <span>{{item.text}}</span>
        <badge :text="item.num" v-if="item.num>0"></badge>
      </tab-item>
    </tab>
    <section v-if="currentIndex === 0" class="bottom mr10 ml10 pb20">
      <ul>
        <li v-for="item in allRows" >
          <div class="time">{{item.createdTime}}</div>
          <div class="order-info" @click="jumpPage(item.userStatus,item.id)">
            <ul class="pl20 pb15">
              <li class="rowflex">
                <div class="info-item c666 ">工单编号</div>
                <div>{{item.code}}</div>
              </li>
              <li v-if="item.engineer" class="rowflex">
                <div class="info-item c666 letterSpacing">工程师</div>
                <div>{{item.engineer.nickName}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">联系电话</div>
                <div>{{item.linkPhone}}</div>
              </li>
              <li v-if="item.errorDescription" class="rowflex">
                <div class="info-item c666 ">报修内容</div>
                <div class="repair-content">{{item.errorDescription}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">工单状态</div>
                <div v-if="item.systemStatus === 0">待派发</div>
                <div v-if="item.systemStatus === 1">待接单</div>
                <div v-if="item.systemStatus === 2">预约中</div>
                <div v-if="item.systemStatus === 3">待出发</div>
                <div v-if="item.systemStatus === 4">行程中</div>
                <div v-if="item.systemStatus === 5">处理中</div>
                <div v-if="item.systemStatus === 6">质检中</div>
                <div v-if="item.systemStatus === 7">处理完成</div>
                <div v-if="item.systemStatus === 8">报销中</div>
                <div v-if="item.systemStatus === 9">待归档</div>
                <div v-if="item.systemStatus === 10">归档</div>
                <div v-if="item.systemStatus === 11">删除</div>
              </li>
              <div v-if="item.userStatus === 1" class="status">待确认</div>
              <div v-if="item.userStatus === 2" class="status">待付款</div>
              <div v-if="item.userStatus === 3" class="status">待评价</div>
              <!--<div v-if="item.userStatus === 0" class="status">正常</div>-->
            </ul>
          </div>
        </li>
      </ul>
    </section>
    <section v-if="currentIndex === 1" class="bottom mr10 ml10 pb20">
      <ul>
        <li v-for="item in querenRows" >
          <div class="time">{{item.createdTime}}</div>
          <div class="order-info" @click="jumpPage(item.userStatus,item.id)">
            <ul class="pl20 pb15">
              <li class="rowflex">
                <div class="info-item c666 ">工单编号</div>
                <div>{{item.code}}</div>
              </li>
              <li v-if="item.engineer" class="rowflex">
                <div class="info-item c666 letterSpacing">工程师</div>
                <div>{{item.engineer.nickName}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">联系电话</div>
                <div>{{item.linkPhone}}</div>
              </li>
              <li v-if="item.errorDescription" class="rowflex">
                <div class="info-item c666 ">报修内容</div>
                <div class="repair-content">{{item.errorDescription}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">工单状态</div>
                <div v-if="item.systemStatus === 0">待派发</div>
                <div v-if="item.systemStatus === 1">待接单</div>
                <div v-if="item.systemStatus === 2">预约中</div>
                <div v-if="item.systemStatus === 3">待出发</div>
                <div v-if="item.systemStatus === 4">行程中</div>
                <div v-if="item.systemStatus === 5">处理中</div>
                <div v-if="item.systemStatus === 6">质检中</div>
                <div v-if="item.systemStatus === 7">处理完成</div>
                <div v-if="item.systemStatus === 8">报销中</div>
                <div v-if="item.systemStatus === 9">待归档</div>
                <div v-if="item.systemStatus === 10">归档</div>
                <div v-if="item.systemStatus === 11">删除</div>
              </li>
              <div v-if="item.userStatus === 1" class="status">待确认</div>
              <div v-if="item.userStatus === 2" class="status">待付款</div>
              <div v-if="item.userStatus === 3" class="status">待评价</div>
              <!--<div v-if="item.userStatus === 0" class="status">正常</div>-->
            </ul>
          </div>
        </li>
      </ul>
    </section>
    <section v-if="currentIndex === 2" class="bottom mr10 ml10 pb20">
      <ul>
        <li v-for="item in fukuanRows" >
          <div class="time">{{item.createdTime}}</div>
          <div class="order-info" @click="jumpPage(item.userStatus,item.id)">
            <ul class="pl20 pb15">
              <li class="rowflex">
                <div class="info-item c666 ">工单编号</div>
                <div>{{item.code}}</div>
              </li>
              <li v-if="item.engineer" class="rowflex">
                <div class="info-item c666 letterSpacing">工程师</div>
                <div>{{item.engineer.nickName}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">联系电话</div>
                <div>{{item.linkPhone}}</div>
              </li>
              <li v-if="item.errorDescription" class="rowflex">
                <div class="info-item c666 ">报修内容</div>
                <div class="repair-content">{{item.errorDescription}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">工单状态</div>
                <div v-if="item.systemStatus === 0">待派发</div>
                <div v-if="item.systemStatus === 1">待接单</div>
                <div v-if="item.systemStatus === 2">预约中</div>
                <div v-if="item.systemStatus === 3">待出发</div>
                <div v-if="item.systemStatus === 4">行程中</div>
                <div v-if="item.systemStatus === 5">处理中</div>
                <div v-if="item.systemStatus === 6">质检中</div>
                <div v-if="item.systemStatus === 7">处理完成</div>
                <div v-if="item.systemStatus === 8">报销中</div>
                <div v-if="item.systemStatus === 9">待归档</div>
                <div v-if="item.systemStatus === 10">归档</div>
                <div v-if="item.systemStatus === 11">删除</div>
              </li>
              <div v-if="item.userStatus === 1" class="status">待确认</div>
              <div v-if="item.userStatus === 2" class="status">待付款</div>
              <div v-if="item.userStatus === 3" class="status">待评价</div>
              <!--<div v-if="item.userStatus === 0" class="status">正常</div>-->
            </ul>
          </div>
        </li>
      </ul>
    </section>
    <section v-if="currentIndex === 3" class="bottom mr10 ml10 pb20">
      <ul>
        <li v-for="item in pingjiaRows" >
          <div class="time">{{item.createdTime}}</div>
          <div class="order-info" @click="jumpPage(item.userStatus,item.id)">
            <ul class="pl20 pb15">
              <li class="rowflex">
                <div class="info-item c666 ">工单编号</div>
                <div>{{item.code}}</div>
              </li>
              <li v-if="item.engineer" class="rowflex">
                <div class="info-item c666 letterSpacing">工程师</div>
                <div>{{item.engineer.nickName}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">联系电话</div>
                <div>{{item.linkPhone}}</div>
              </li>
              <li v-if="item.errorDescription" class="rowflex">
                <div class="info-item c666 ">报修内容</div>
                <div class="repair-content">{{item.errorDescription}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">工单状态</div>
                <div v-if="item.systemStatus === 0">待派发</div>
                <div v-if="item.systemStatus === 1">待接单</div>
                <div v-if="item.systemStatus === 2">预约中</div>
                <div v-if="item.systemStatus === 3">待出发</div>
                <div v-if="item.systemStatus === 4">行程中</div>
                <div v-if="item.systemStatus === 5">处理中</div>
                <div v-if="item.systemStatus === 6">质检中</div>
                <div v-if="item.systemStatus === 7">处理完成</div>
                <div v-if="item.systemStatus === 8">报销中</div>
                <div v-if="item.systemStatus === 9">待归档</div>
                <div v-if="item.systemStatus === 10">归档</div>
                <div v-if="item.systemStatus === 11">删除</div>
              </li>
              <div v-if="item.userStatus === 1" class="status">待确认</div>
              <div v-if="item.userStatus === 2" class="status">待付款</div>
              <div v-if="item.userStatus === 3" class="status">待评价</div>
              <!--<div v-if="item.userStatus === 0" class="status">正常</div>-->
            </ul>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
    import {Tab, TabItem,Badge} from 'vux'
    export default {
      name: "MyOrders",
      components: {
        Tab, TabItem,Badge
      },
      data(){
        return {
          list: [
            {
              text: '全部',
              num: 0,
            },{
              text: '待确认',
              num: 0,
            },{
              text: '待付款',
              num: 0,
            },{
              text: '待评价',
              num: 0,
            }],
          currentIndex: 0,
          Gparam: {
            bar: 1,
            querenNew: 0,
            fukuanNew: 0,
            pingjiaNew: 0,
          },
          userInfo: {},
          rows: [],
          allRows: [],
          querenRows: [],
          fukuanRows: [],
          pingjiaRows: [],
          wanchengRows: [],
        }
      },
      methods: {
        jumpBar: function (num){
          this.Gparam.bar = num
          if(num == 1){
            this.rows = this.allRows
          } else if(num==2){
            this.rows = this.querenRows
          } else if(num==3){
            this.rows = this.fukuanRows
          } else if(num==4){
            this.rows = this.pingjiaRows
          }
        },
        jumpPage: function (url,id) {
          if (url === 1){ //待确认
            this.$router.push({path: '/user/orderConfirm',query: {orderId: id}})
          } else if(url === 2){ // 待付款
            this.$router.push({path: '/pay/preview/',query: {orderId: id}})
          } else if(url === 3){ // 待评价
            this.$router.push({path: '/user/orderAppraiseHome',query: {orderId: id}})
            // this.$router.push("/user/orderAppraiseHome")
          }
        },
      },
      mounted(){
        this.$getUserInfo().then(user=>{
          this.userInfo = user
          let data = {
            search: {
              fields: this.userInfo.id
            }
          }
          this.$http.get('/work/api/workorder/count/proposer').then(res=> {
            let data = res.data.data
             this.list[1].num = ''+data.affirmCount
             this.list[2].num = ''+data.paiedCount
             this.list[3].num = ''+data.evaluatedCount
          })
          this.$http.get('/work/api/workorder?noPage=true&proposerId='+this.userInfo.id).then(res=>{
              this.rows = res.data.data
              this.allRows = this.rows
              console.log(this.rows)
              for (let i = 0; i < this.rows.length; i++){
                if(this.rows[i].userStatus === 1 ){
                  this.querenRows.push(this.rows[i])
                }else if(this.rows[i].userStatus === 2 ){
                  this.fukuanRows.push(this.rows[i])
                }else if(this.rows[i].userStatus === 3 ){
                  this.pingjiaRows.push(this.rows[i])
                }else if(this.rows[i].userStatus === 0 ){
                  this.wanchengRows.push(this.rows[i])
                }
              }
            }
          )
        })
      },
    }
</script>

<style lang="less">
  .myOrders {
    font-size: 0.13rem;
    .br{
      height: 1px;
    }
    .nav {
      height: 0.4rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 2;
    }
    .nav ul {
      display: flex;
      justify-content: space-around;
      line-height: 0.4rem;
      font-size: 0.16rem;
      text-align: center;
      color: #666;
    }
    .nav ul li {
      width: 0.6rem;
    }
    .vux-badge-single{
      margin-top: -0.02rem;
    }
    .markBlue {
      color: #42a3fd !important;
      border-bottom: solid 0.01rem #42a3fd;
    }
    .markNew {
      display: block;
      width: 0.12rem;
      height: 0.12rem;
      background-color: #fa4a38;
      font-size: 0.08rem;
      border-radius: 0.12rem;
      line-height: 1;
      margin-top: -0.04rem;
      margin-left: 0.55rem;
      position: absolute;
      top: 0.1rem;
      color: #fff;
    }
    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      margin-top: 0.1rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
    }
    .order-info ul {

    }
    .order-info ul li {
      margin-top: 0.15rem;
      line-height: 0.15rem;
    }
    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }
    .order-info .info-item {
      width: 0.75rem;
    }
    .order-info .status {
      font-size: 0.1rem;
      width: 0.45rem;
      height: 0.17rem;
      line-height: 0.17rem;
      border-radius: 0.17rem;
      text-align: center;
      top: 0.2rem;
      right: 0.1rem;
      background-color: #fa4a38;
      color: #fff;
      position: absolute;
    }
    .time {
      background-color: #d3d3d3;
      display: inline-block;
      padding: 0 0.08rem;
      border-radius: 0.04rem;
      font-size: 0.1rem;
      color: #fff;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 0.2rem;
    }
    .bottom{
      margin-top: 0.4rem;
    }
  }
</style>
